<template>
  <div class="box">
    <div class="title">
      精选好课
      <router-link to="" @click.native="toMoreList">更多&gt;</router-link>
    </div>
    <!-- 精选好课区域 -->
    <div class="zbcourse">
      <div v-for="(item, index) in courseList" :key="index" class="scaleDiv">
        <router-link to="" @click.native="goTo(item.id, item.type)"
          ><img v-lazy="item.image" alt=""
        /></router-link>
        <span class="setcenter">
          <p class="title-intro">{{ item.title }}</p>
          <p class="content">{{ item.memo }}</p>
          <span class="pdl20">
            <span class="teacher"
              ><span>讲师：{{ item.teacherName }}</span></span
            >
            <span class="study-num">{{ item.num }}人已学</span>
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      courseList: []
    }
  },
  methods: {
    getGoodCourseList () {
      sendPost(api.getCourseList, { isRec: '1', offset: 0, limit: 4 }).then(res => {
        // console.log(res.data);
        this.courseList = res.data
      })
    },
    goTo (id, type) {
      // console.log(type);
      if (type === '1' || type === '2' || type === '3' || type === '4' || type === '5' || type === '6' || type === '7') {
        this.$router.push('cclcourseinfo?isRec=1&id=' + id + "&type=" + type)
      }
    },
    toMoreList () {

      this.$router.push('basecourselist?isRec=1&listName=精选好课')

    }
  },
  created () {
    this.getGoodCourseList()
    this.goTo()
  }
}
</script>

<style lang="less" scoped>
/deep/body,
html {
  background-color: #e8eaed;
}
.box {
  background-color: #e8eaed;
  padding-bottom: 3.125rem;
}
.title {
  width: 75rem;
  margin: auto;
  display: flex;
  font-size: 2.5rem;
  text-align: left;
  justify-content: space-between;
  line-height: 2.5rem;
  height: 6.25rem;
  line-height: 6.25rem;
  a {
    text-decoration: none;
    color: #989799;
    font-size: 1rem;
  }
}
.scaleDiv:hover {
  transform: translateY(0.3125rem);
  box-shadow: 0 0 20px 2px #918f8f; /*盒子阴影*/
}
.zbcourse {
  width: 75rem;
  margin: auto;
  display: flex;
  background-color: #e8eaed;
  box-sizing: border-box;
  :last-child {
    margin-right: 0;
  }
  div {
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all 0.3s;
    width: 17.5rem;
    background-color: #fff;
    margin-right: 1.6875rem;
  }
  a {
    display: flex;
    width: 100%;
    height: 10.1875rem;
    background-color: #abcdef;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.title-intro {
  font-size: 1.25rem;
  color: #666;
  font-weight: 400;
  height: 3.4375rem;
  line-height: 3.4375rem;
  padding: 0 1.25rem;
  box-sizing: border-box;
  text-align: left;
}
.content {
  font-size: 0.875rem;
  color: #999;
  padding: 0 1.25rem;
  text-align: left;
  height: 2.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}
.pdl20 {
  display: flex;
  font-size: 0.875rem;
  text-align: left;
  color: #999;
  box-sizing: border-box;
  line-height: 3.125rem;
  justify-content: space-between;
  .teacher {
    padding-left: 1.25rem;
    box-sizing: border-box;
    span {
      height: 1.375rem;
      display: inline-block;
      font-size: 0.875rem;
      color: #ff5e4e;
      background-color: #ffdfdc;
      line-height: 1.25rem;
      text-align: center;
    }
  }
  .study-num {
    padding-right: 1.25rem;
    text-align: right;
    box-sizing: border-box;
  }
}
</style>
